<template>
  <div class="container">
    <div class="waterfall-container">
      <div
        v-for="(item, index) in items"
        :key="index"
        class="waterfall-item"
      >
        <div style="cursor: pointer" @click="handleDownload(item)">
          <el-row type="flex" align="middle" style="flex-wrap: wrap" :gutter="20"  :key="item.id"
                  shadow="never" class="blog-content">
            <div style="width: 550px; height: 150px">
              <el-col class="waterfall" :xs="24" :sm="6">
                <el-image v-if="item.linkUrl" lazy src="/wangpan.jpg">
                </el-image>
                <el-image v-else lazy :src="item.iconUrl">
                  <div slot="error" class="image-slot">
                    <el-image src="/zipIcon.png" fit="cover" class="blogPic">></el-image>
                  </div>
                </el-image>
              </el-col>
              <el-col :xs="24" :sm="18" style="padding-left: 10px;padding-right: 10px;margin-bottom: 5px;margin-top: -5px;">
                <div>
                  <h1>{{item.fileOriginName}}</h1>
                  <div style="margin-bottom: 10px;">
                    <span style="color: rgba(0, 0, 0, .4);"> {{item.remark}}</span>
                  </div>
                </div>
              </el-col>
            </div>
          </el-row>
        </div>
      </div>
    </div>
    <div class="paginationList">
      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" background layout="prev, pager, next" @pagination="getBlogList"  style="margin-bottom: 30px;float: right;margin-right: 10px;"/>
    </div>
  </div>
</template>

<script>
import {getOpenFileList} from "@/api/cms/blog";
import {
  Loading
} from 'element-ui';

export default {
  name: "index",
  data() {
    return {
      items: [],
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        openFLag: "Y",
        fileType: 0
      },
    }
  },
  mounted() {
    this.getBlogList();
  },
  methods: {
    getBlogList() {
      getOpenFileList(this.queryParams).then(response => {
        this.items = response.rows;
        this.total = response.total;
      }).finally(()=>{

      });
    },
    handleDownload(row) {
      if(row.linkUrl) {
        window.open(row.linkUrl, '_blank')
      } else {
        var name = row.fileOriginName;
        var url = row.filePath;
        var suffix = url.substring(url.lastIndexOf("."), url.length);
        const a = document.createElement('a')
        a.setAttribute('download', name)
        a.setAttribute('target', '_blank')
        a.setAttribute('href', process.env.VUE_APP_BASE_API + url)
        a.click()
      }
    },
  }
}
</script>

<style scoped lang="scss">
.container {
  display: flex;
  align-items: center;
  flex-direction: column;
  .waterfall-container {
    margin-top: 7.5em;
    margin-bottom: 7.5em;
    width: 1140px;
    column-count: 2; /* 定义列数 */
    column-gap: 20px; /* 列与列之间的间隔 */
    padding: 10px;
    box-sizing: border-box;
  }

  .waterfall-item {
    break-inside: avoid; /* 防止内容被拆分到不同的列中 */
    margin-bottom: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    overflow: hidden;
  }

  .waterfall-image {
    width: 100%;
    height: 100%;
    display: block;
  }

  .waterfall-content {
    padding: 10px;
    .content-title {
      font-weight: normal;
      text-decoration: none;
      color: #666666;
    }
    .content-blogDesc {
      min-height: 1em;
      font-weight: 600px;
    }
  }  .blog-content:hover {
       border-left: 5px solid #3a8ee6;
       border-right: 5px solid #3a8ee6;
       background-color: rgba(58, 142, 230, 0.3);
       cursor: pointer;
     }

  .blog-content {
    padding: 10px;
    height: auto;
    border-bottom: 1px solid rgb(199, 163, 92);
    /*border-bottom: 1px solid rgba(34, 36, 38, .15);*/
    transition: .3s;
  }
}
.paginationList {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
